<%@page import="java.util.List"%>
<%@page import="com.mongodb.DBObject"%>
<%@ page language="java" contentType="text/html; charset=utf-8"   pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>专家信息</title>
   <link rel="stylesheet" type="text/css" href="css/header.css" />
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
   <link rel="stylesheet" type="text/css" href="css/expert.css"/>
   <!--联网使用-->
   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="js/index.js"></script>
 	<!--云标签  -->
 	  <script src="js/wordcloud2.js"></script>
 	
 	
   <!--绘制表格-->
   <script src="js/Chart.min.js" type="text/javascript"></script>
   <!-- 进度条 -->
      <link rel="stylesheet" type="text/css" href="css/jindutiao.css">
   <!--关联图-->
   <script src="js/sigma.core.js"></script>
   <script src="js/conrad.js"></script>
   <script src="js/utils/sigma.utils.js"></script>
   <script src="js/utils/sigma.polyfills.js"></script>
   <script src="js/sigma.settings.js"></script>
   <script src="js/classes/sigma.classes.dispatcher.js"></script>
   <script src="js/classes/sigma.classes.configurable.js"></script>
   <script src="js/classes/sigma.classes.graph.js"></script>
   <script src="js/classes/sigma.classes.camera.js"></script>
   <script src="js/classes/sigma.classes.quad.js"></script>
   <script src="js/captors/sigma.captors.mouse.js"></script>
   <script src="js/captors/sigma.captors.touch.js"></script>
   <script src="js/renderers/sigma.renderers.canvas.js"></script>
   <script src="js/renderers/sigma.renderers.webgl.js"></script>
   <script src="js/renderers/sigma.renderers.def.js"></script>
   <script src="js/renderers/webgl/sigma.webgl.nodes.def.js"></script>
   <script src="js/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
   <script src="js/renderers/webgl/sigma.webgl.edges.def.js"></script>
   <script src="js/renderers/webgl/sigma.webgl.edges.fast.js"></script>
   <script src="js/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.labels.def.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.hovers.def.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.nodes.def.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.edges.def.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.edges.curve.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
   <script src="js/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
   <script src="js/middlewares/sigma.middlewares.rescale.js"></script>
   <script src="js/middlewares/sigma.middlewares.copy.js"></script>
   <script src="js/misc/sigma.misc.animation.js"></script>
   <script src="js/misc/sigma.misc.bindEvents.js"></script>
   <script src="js/misc/sigma.misc.drawHovers.js"></script>



</head>
<body>
<!--导航-->
  <div class="menu">
    <ul>
      <li><img id="tubiao" src="images/tubiao.png" alt="HPU比特能"/></li>
      <li class="current"><a href="#"></a></li>
      <li><a href="indexservlet" style="margin-left:30px;">基于智能计算的信息推荐系统</a></li>
    </ul>
    <div class="sousuo">
 <form action="ssexpertlistServlet" method="post" role="form" class="form" id="form">
      <div class="col-sm-6">
         <input type="text"  class="form-control" id="inputInfo"  name="key" placeholder="输入专家姓名或研究方向" >
      </div>
       <button type="submit" class="btn btn-default" id="btn_cha" onclick="javascript:void(0)">查询</button>
    </form>
   </div>
  </div>

  <!--内容-->
  <div id="content">
  <% List<DBObject> list=(List<DBObject>)request.getAttribute("list");
  	if(list!=null)
  	{ 		
  %>
      <ul>
      	<li>
          <!--专家信息-->
      		<div class="expert_info">
            <ul>
              <li><h5>专家信息</h5> </li>
              <li><%=list.get(0).get("expert_name").toString().trim() %><span><%=list.get(0).get("research") %></span></li>
              <li>
              <% int dj=Integer.valueOf(list.get(0).get("dengji").toString());
	              for(int i=0;i<dj;i++)
	              {%>
                    <img src="images/star.png" alt="等级">                   
                 <%
                 } 
                 %>
                  <span><%=list.get(0).get("expert_org")%></span>
              </li>
             
            </ul>
            <div class="biaoji">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              <img src="images/biaoji.png">
            </div>
            
      		</div>
         <!--  专家评价 -->
      		<div class="expert_ping">
      			<ul>
              <li><h5>成就</h5> </li>
              <li style="height:80px;">
              <!-- 评语点击 -->
               
               
               <span id="eee"><%=list.get(0).get("expert_name") %></span>专家，
               共获得专利数<span><a target="_blank" href="patentservlet?expert_name=<%=list.get(0).get("expert_name")%>"><%=list.get(0).get("zhuanli_count") %></a></span>个，
               其中文献<span><a target="_blank" href="lilteratureservlet?expert_name=<%=list.get(0).get("expert_name")%>"><%=list.get(0).get("qingbao_count") %></a></span>篇、
               情报<span><a target="_blank" href="intelligenceservlet?expert_name=<%=list.get(0).get("expert_name")%>"><%=list.get(0).get("wenxian_count") %></a></span>篇，
               特评为<span><%=list.get(0).get("dengji") %></span>星级专家荣誉称号。
              
              
              </li>
            </ul>
            <div class="biaoji">
              <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
              <img src="images/biaoji.png">
            </div>
      		</div>
      	</li>
<!-- 关联图 -->
        <li>
        	<div class="expert_guanlian">
        		<ul>
              <li><h5>专家关联图</h5> </li>
              <li id="graph-container" style="height:420px;">
              <!--进度条-->
             
					<ul id="container" >
					<li>
					  <h3 class="stick"></h3>
					  <h3 class="stick"></h3>
					  <h3 class="stick"></h3>
					  <h3 class="stick"></h3>
					  <h3 class="stick"></h3>
					  <h3 class="stick"></h3>
					  <h1>Loading...</h1>
					  </li>
					</ul>
       
              </li>
            </ul>
            <div class="biaoji">
              <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
              <img src="images/biaoji.png">
            </div>

        	</div>

          <div class="expert_tjtwo">
             <ul>
              <li><h5> 相关信息统计</h5> </li>
              <li style="height:180px;border-bottom:1px solid #EEEE00; ">
                   <canvas id="chart-area" width="400" height="l50"/>
<script>
    //饼图数据（开始）
    var doughnutData = [
        {
          value: <%=list.get(0).get("zhuanli_count")%>,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "专利数"
        },
        {
          value: <%=list.get(0).get("wenxian_count")%>,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "情报数"
        },
        {
          value: <%=list.get(0).get("qingbao_count") %>,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "文献数"
        }
      ];
      //饼图数据（结束）
      //ajax

	$.ajax({    
		type:'post',    
		url:"expert_ZFTservlet?expert_name="+"<%=list.get(0).get("expert_name")%>",//请求地址    	
		dataType:'json', //数据类型   
		success:callback //请求成功处理函数   
		});    
	
		   


//直方图数据（开始）
function  callback(data){
	var expertname_list=new Array();
	var zhunlicount_list=new Array();
	var qingbaocount_list=new Array();
	var wenxiancount_list=new Array();
	for(var i=0;i<data.length&&i<7;i++)
	{
	 expertname_list.push(data[i].expert_name);
	 zhunlicount_list.push(data[i].zhuanli_count);
	 qingbaocount_list.push(data[i].qingbao_count);
	 wenxiancount_list.push(data[i].wenxian_count);
	}
	
	var barChartData ={			   
    labels : expertname_list,
    datasets : [
      {
        fillColor : "rgba(220,220,220,1)",
        strokeColor : "rgba(220,220,220,1)",
        highlightFill: "rgba(220,220,220,1)",
        highlightStroke: "rgba(220,220,220,1)",
        data : zhunlicount_list //专利
        
      },
      {
        fillColor : "rgba(151,187,205,1)",
        strokeColor : "rgba(151,187,205,1)",
        highlightFill : "rgba(151,187,205,1)",
        highlightStroke : "rgba(151,187,205,1)", //文献
        data : qingbaocount_list
      },
      {
          fillColor : "rgba(120,128,173,1)",
          strokeColor : "rgba(120,128,173,1)",
          highlightFill : "rgba(120,128,173,1)",
          highlightStroke : "rgba(120,128,173,1)", //情报
          data : wenxiancount_list
        }
    ]
  }
	var ctx = document.getElementById("canvas-bar").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, { responsive : true });
};
   //直方图数据（结局）ajax请求
 
 //关联图数据开始
/**
 * array数组里的index为0的是圆心
 * centerid  圆心id
 * 初始cx cy 圆心坐标
 * 第一层 r1 半径
 * 第二层 r2 半径
 */
 function experGuan(nodeNum,array,arr2,centerId,cx,cy,r1,r2) {
 //存取坐标

 var i,
    N = nodeNum,
    g = {
      "nodes": [
        {
           id: centerId,
           label: centerId,
           x:cx,
           y:cy,
           size: 10,
           color: '#FFD700'
        }
      ],
      "edges": []
    };
    //得到平均度数
 var du=360/(N-1);
 

 for (i = 1; i <N; i++){
  //结点
  var deg=du*i;
  var x1=cx+r1*Math.cos((Math.PI/180)*deg);
  var y1=cy+r1*Math.sin((Math.PI/180)*deg);
  // alert("结点坐标： "+x1+"|"+y1);
   g.nodes.push({
    id: array[i],
    label: array[i],
    x:x1,
    y:y1,
    size: 10,
    color: '#F08080'
  });
  //连线
   g.edges.push({
    id: 'e' + i,
    source: centerId,
    target: array[i],
    size:50,
    color: '#9AFF9A',
    type: ['curve', 'Arrow', 'curvedArrow'][0]
  });
  
  //遍历下层循环
  
  // alert("arr2.length:"+arr2.n2);
   var ename=array[i];
   console.log("当前名字："+ename);
   var array2=arr2[i-1][array[i]];
   console.log("array2:"+array2);
   //array2.splice(0,0,ename);
   
   var du1=360/(array2.length-1);
   
 if(array2.length>0){
	 //二级随机颜色
   var colorRan='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
   for(var j=1;j<array2.length;j++){
    var deg1=du1*j;
    g.nodes.push({
      id: array2[j]+j+i,
      label: array2[j],
      x:x1+r2*Math.cos((Math.PI/180)*deg1),
      y:y1+r2*Math.sin((Math.PI/180)*deg1),
      size: 4,
      color: "#8DEEEE" 
   });

    g.edges.push({
    id: 'e1' + j+i+Math.random(),
    source: ename,
    target: array2[j]+j+i,
    size:20,
    color: colorRan,
    type: ['curve', 'Arrow', 'curvedArrow'][0]
    });
   
   }//内层for循环结束
 }//if判断
	
}//外层for循环结束
//进度条隐藏
$("#container").hide();
 return g;
 }
  
  
  function huiGuanlian(expertName){
	 var arr1=new Array();
	 var arr2=new Array();
	
	   $.ajax({    
           type:'get',        
           url:'expert_GLTservlet?expert_name='+expertName+"&label="+0,    
           cache:true,
           dataType:'json',    
           success:function(data){   
        	   
       //    console.log("第一层数据："+data[0][expertName]);
           //01.获得第一层数据数组
           arr1=data[0][expertName];
         
         //  arr1.splice(0,0,expertName);
           //03.获得第二层数据数组
           $.ajax({    
               type:'get',        
               url:'expert_GLTservlet?expert_name='+expertName+"&label="+1,   
               cache:true,
               dataType:'json',    
               success:function(data){  
            	   
            	   console.log(data.length);
            	   //04.根据第一层专家数据获得第二层关联专家
            	   //for(var t=0;t<arr1.length;t++){
            		  //第二层数据数组获得
            		 // console.log(data[t][arr1[t]]);
            	  //}
            	  //02.第一个加上查询专家的名字
            	  arr1.splice(0,0,expertName);
            	   //05.调用函数得到绘制关联图参数
            	  var g=experGuan(arr1.length,arr1,data,arr1[0],0.5,0.5,0.6,0.1);

                   //06.绘制
                  var s = new sigma({
                   graph: g,
                   renderer: {
                   container: document.getElementById('graph-container'),
                   type: 'canvas'
                   }
                  });//绘图结束
                   
                   
                   
               }//success结束
    	   });//内层ajax结束
           
           }  //success  
       });//外层ajax
	 
  }
    //关联图结束
//云图开始
function huiyuntu(expertName){
     //01.ajax请求加权数据
	 $.ajax({    
         type:'get',        
         url:'expert_YTservlet?expert_name='+expertName,    
         cache:true,
         dataType:'json',    
         success:function(data){   
        	 console.log("huiyuntu:"+data);
        	 //分析data：后台封装数据格式为从大到小排列：[['dangdang', 12],['傻猎豹', 10], ['不如', 9], ['麻花疼', 9]]
        	 //02.封装数据
        	 var options = eval({
                 "list": data,
                 "gridSize": 6,
                 "weightFactor":6,
                 "fontFamily": 'Times, serif',
                 "color": 'random-dark',
                 "backgroundColor": "rgba(0,0,0,0)",
                 "rotateRatio": Math.random()
                });
                
        	    //03.绘制
                var canvas = document.getElementById('canvas_yun');
                WordCloud(canvas, options);
                 
         }//success
	 });//ajax
 }
//云图结束
//合作者团队开始
function huituandui(expert_name){
	
	 $.ajax({    
         type:'get',        
         url:'expert_HZTDservlet?expert_name='+expert_name,    
         cache:true,
         dataType:'json',    
         success:function(data){ 
        	 var text;
        	 for(var i=0;i<data.length&&i<6;i++)
        	 {
        		 text+="<tr><td>团队"+(i+1)+"："+data[i].author_cn+"</td></tr>";
        	}
        	
        	$("#tuandui").html(text);
        	 
         }
	 });
}
//合作者团队结束
    
    
    
    
   window.onload = function(){
        //饼图
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
    	//关联图
        huiGuanlian("<%=list.get(0).get("expert_name").toString().trim()%>");
    	//云标签
        huiyuntu("<%=list.get(0).get("expert_name").toString().trim()%>");
    	//合作者团队
        huituandui("<%=list.get(0).get("expert_name").toString().trim()%>");
    };
		


  </script>
            </li>

              <li style="height:240px;">
                  <canvas id="canvas-bar" height="230" width="400"></canvas>
              </li>
            </ul>
            <div class="biaoji">
              <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
              <img src="images/biaoji.png">
            </div>
          </div>
        </li>
        
        <li>
           <div class="expert_time">         
          </div>
        </li>

        <li>
             <div class="expert_yun">
               <ul>
              <li><h5> 云图</h5> </li>
              <li style="height:400px;">

  <!--云标签-->
   <canvas id="canvas_yun" width="540px" height="340px"></canvas>
              </li>
            </ul>
            <div class="biaoji">
              <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
              <img src="images/biaoji.png">
            </div>

          </div>
 <!--云标签结束-->  
 <!--合作团队  -->
 
          <div class="expert_tjone">
              <ul>
              <li><h5>专家合作团队</h5> </li>
              <li style="height:400px;">
                <table id="tuandui" class="table ">
                
                            
                </table>
              </li>
             
            </ul>
       
            <div class="biaoji">
              <span class="glyphicon glyphicon-education" aria-hidden="true"></span>
              <img src="images/biaoji.png">
            </div>
    </div>  
    
        </li>  
        </ul>
 <%
  	}
%>  
    
 <div id="foolter">
         hpuacm&copy;版权所有
</div>
</div>  

</body>
</html>